<template>
  <div class="user-info">
    <div class="header">
      <img class="logo" :src="logoSrc" alt="Product Logo" />
    </div>
    <!--分割线-->
    <div class="divider"></div>
    <div class="avatar">
      <el-avatar
          :size="200"
      src="http://139.9.202.40:9000/xnetworkdisk/1723425372561.mp4_thumbnail.png"/>
      <div class="avatar-actions">
        <el-upload
            class="avatar-upload"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
        >
          <el-button size="medium" type="primary">上传头像</el-button>
        </el-upload>
        <el-button size="medium" @click="previewAvatar">预览头像</el-button>
      </div>
    </div>
    <el-card class="card">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="个人资料" name="personal-details">
        <PersonalDetails />
      </el-tab-pane>
      <el-tab-pane label="账号安全" name="account-security">
        <AccountSecurity />
      </el-tab-pane>
    </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PersonalDetails from './PersonalDetails.vue';
import AccountSecurity from './AccountSecurity.vue';

const activeTab = ref('personal-details');

// 从 sessionStorage 中获取存储的用户信息
const userInfoString = sessionStorage.getItem('userInfo');

// 将获取的字符串解析为对象
const userInfo = JSON.parse(userInfoString);

// 导入图片
import logoImage from '@/assets/X-logo.png'; // 请将路径替换为你的图片路径

const logoSrc = logoImage;
const handleTabClick = (tab) => {
  console.log(userInfo);
  console.log('Tab clicked:', tab.name);
};

const previewAvatar = () => {
  // 这里可以添加预览头像的逻辑，例如打开一个模态框显示头像
  window.open(avatarSrc.value, '_blank');
};

const handleUploadSuccess = (response, file, fileList) => {
  console.log('Upload successful:', response);
  // 这里可以更新头像 URL
  avatarSrc.value = URL.createObjectURL(file.raw);
};

const beforeUpload = (file) => {
  // 可以添加上传前的校验逻辑
  return true;
};
</script>

<style scoped>
.header {
  display: flex;
  margin-bottom: 15px;
}

.divider {
  border-top: 1px solid #e0e0e0;
  margin-bottom: 20px;
}
.logo {
  max-width: 200px; /* 控制图片的最大宽度 */
  max-height: 66px; /* 控制图片的最大高度 */
}
.user-info {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  width:100%;
  height:100%;
}
.avatar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  width: 700px; /* 设置卡片的宽度 */
  max-width: 100%; /* 使卡片宽度最大化到容器宽度 */
  margin: 0 auto; /* 居中卡片 */
  margin-top:20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-actions{
  display: flex;
  flex-direction: row;
  margin-top: 20px;

  .avatar-upload{
    margin-right:20px;
  }
}
</style>
